<template>
    <div class="page-footer">
        <div class="pagesize">
            <div class="page-btn" @click="pagePre">上一页</div>
            <div class="pageno">{{ page || 0}}/{{ Math.ceil(pageTotal / pagesize) || 0 }}</div>
            <div class="page-btn" @click="pageNext">下一页</div>
        </div>
        <div class="pageinfo">
            当前页：{{page}}，数据总量   <span class="red">{{ pageTotal }}</span>条，每页数据：{{pagesize }}
        </div>
    </div>
</template>

<script>
export default {
    name: "page",
    props: ['page', 'pagesize', 'pageSize', 'pageTotal'],
    data() {
        return {}
    },
    methods: {
        pagePre() {
            this.$emit('pre')
        },
        pageNext() {
            this.$emit('next')
        }
    }
}
</script>

<style lang="scss">
.page-footer {
  display: none;
    position: fixed;
    z-index: 999;
    bottom: 0;
    height: 162rpx;
    width: 100%;
    background: #f0f0f0;
    left: 0;
    .pageinfo {
        height: 80rpx;
        background-color: #fff;
        font-size: 32rpx;
        font-weight: 400;
        color: #333;
        line-height: 80rpx;
        text-align: center;
        .red {
            color: #fc4141;
        }
    }
    .pagesize {
        width: 100%;
        height: 80rpx;
        display: flex;
        align-items: center;
        .page-btn {
            flex-shrink: 0;
            width: 140rpx;
            height: 80rpx;
            background: #f0f0f0;
            border-radius: 8rpx;
            font-size: 30rpx;
            font-weight: 400;
            color: #999;
            line-height: 80rpx;
            text-align: center;
        }
        .pageno {
            background-color: #f8f8f8;
            height: 80rpx;
            flex-grow: 1;
            font-size: 30rpx;
            font-weight: 400;
            color: #999;
            line-height: 80rpx;
            text-align: center;
        }
    }
}
</style>
